<template>
  <div>
    <div class="tree-box">
      <el-tree
        :data="deptList"
        node-key="value"
        ref="tree"
        highlight-current
        @node-click="handleNodeClick"
        :props="deptProps">
      </el-tree>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      row-key="positionId"
      border
      stripe
      fit
      highlight-current-row
      @current-change="handleCurrentChange">
      <!-- <el-table-column prop="deptName" label="所属部门" min-width="150" align="center"></el-table-column> -->
      <el-table-column prop="positionName" label="岗位" min-width="150" align="center"></el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getPositionLIst" />
  </div>
</template>

<script>
import { getDeptTree, getPositionByDeptId } from '@/api/workflow/system/dept'
import Pagination from '@/views/workflow/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      deptList: null, // 部门列表
      deptProps: {
        children: 'children',
        label: 'title'
      },
      dept: {}, // 选中的部门信息
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      list: [], // 岗位列表
      listLoading: false
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    getDeptList() {
      getDeptTree().then(res => { // 获取部门树
        this.deptList = res.data
      })
    },
    handleNodeClick(data) {
      this.dept = {
        value: data.value,
        title: data.label
      }
      this.getPositionLIst()
    },
    getPositionLIst() {
      const deptId = this.dept.value
      getPositionByDeptId(deptId).then(res => {
        this.list = res.data
      })
    },
    handleCurrentChange(row) {
      this.$emit('callbackPosition', this.dept, row)
    }
  }
}
</script>

<style scoped>
  .tree-box {
    height: 200px;
    overflow: auto;
  }
</style>
